/* 
	该文件是webpack配置文件，webpack在运行时，会自动读取该文件中暴露的配置对象
*/
//引入Node.js中一个内置的模块path，用于处理所有路径问题
const path = require('path');
//引入eslint-webpack-plugin插件，用于对js进行语法检查
const ESLintPlugin = require('eslint-webpack-plugin');
//引入html-webpack-plugin，用于帮助我们生成html文件，并且自动引入资源
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入clean-webpack-plugin，用于清空打包目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 
//引入mini-css-extract-plugin，用于提取css为单独文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//引入optimize-css-assets-webpack-plugin，用于压缩css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
//进度条
const ProgressBarPlugin = require('progress-bar-webpack-plugin');

module.exports = {
  entry: ['./src/index.js','./src/index.html'], //入口配置
	output: { //输出配置
    path: path.resolve(__dirname, '../build'), //输出路径
    filename: './js/index.js', //输出的文件名
		publicPath:'/'
  },
	mode:'production', //工作模式
	//配置loader
	module: {
		//rules是一个数组，数组中配置着一个一个的loader及其工作配置
    rules: [
			//解析less
			{
				test: /\.less$/, //匹配所有以.less结尾的文件，若匹配上了交给use中配置的loader进行解析
				use: [
							MiniCssExtractPlugin.loader, //CJS的样式模块提取成一个css文件
						 "css-loader", // 将css样式变为CJS的一个样式模块
						 "postcss-loader", // 处理css兼容性问题
						 "less-loader" // 将less样式解析成css样式
					]
			},
			//js语法转换
			{
				test: /\.js$/,
				exclude: /(node_modules)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env']
					}
				}
			},
			//解析样式中的图片资源
			{
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,//如果图片小于8KB，则转为base64
							outputPath:'imgs', //图片输出到build文件夹下的哪个文件夹
							name:'[hash:5].[ext]',//图片的命名规则
							// publicPath: './imgs',  //css中最终引入图片时的统一路径
            }
          }
        ]
      },
			//配置解析html中的图片资源
			{
				test: /\.(html)$/,
				use: {
					loader: 'html-loader'
				}
			},
			//处理其他文件
			{
				test: /\.(eot|svg|woff|woff2|ttf)$/,  // 处理字体文件
				loader: 'file-loader',
				options: {
					outputPath: 'font',
					name: '[hash:5].[ext]'
				}
			},

			/* {
				test: /\.(mp3|mp4|avi)$/,  // 处理字体文件
				loader: 'file-loader',
				options: {
					outputPath: 'media',
					name: '[hash:8].[ext]'
				}
			} */
		]
  },
	//配置插件
	plugins:[
		new ESLintPlugin(),
		new HtmlWebpackPlugin({
			template: './src/index.html', // 设置要编译的 HTML 源文件路径
		}),
		new CleanWebpackPlugin(),
		new MiniCssExtractPlugin({// 3. 配置插件
				filename: "css/[hash:5].css",
		}),
		new OptimizeCssAssetsPlugin(),
		new ProgressBarPlugin()
	],
};